<template>
<el-container class="changePassword">
  <el-main>
    <back></back>
    <div class="logo">
      <img src="../../static/img/logo.png" alt="">
    </div>
    <div class="change">
      <el-input v-model="oldPwd" type="password" placeholder="请正确输入原密码" prefix-icon="iconfont icon-icon-mima" @blur="checkPwd" ></el-input>
      <el-input v-model="newPwd" type="password" placeholder="请输入6-16位新密码,数字与字母的组合" prefix-icon="iconfont icon-icon-mima"></el-input>
      <el-input v-model="rptPwd" type="password" placeholder="请再次输入密码" prefix-icon="iconfont icon-mimazhengque" ></el-input>
    </div>
    <div class="submitPwd">
      <el-button type="danger" round @click="changePassword">确定</el-button>
    </div>
  </el-main>
</el-container>
</template>

<script>
  import back from '@/components/back'
  import qs from 'qs'
    export default {
      data(){
        return{
          oldPwd:'',
          newPwd:'',
          rptPwd:'',
          err:false,
          id:'',

        }
      },
      methods:{
        checkPwd(){

        },
        changePassword(){
          if(this.oldPwd == ''){
            this.$message.warning('请输入原密码');
            return;
          }
          let checkOldPwd = {
            merchantId:this.id,
            pwd:this.oldPwd
          };
          this.$axios.post('/api/front/merchant/checkPwd',qs.stringify(checkOldPwd))
            .then(res => {
              console.log(res.data)
              if(res.data.status == 202){
                this.err = true;
                this.$message.error('原密码输入错误,请重新输入');
              }else {
                this.err = false;
              }

            })
          if(this.newPwd == '' || this.rptPwd == ""){
            this.$message.warning('请填写相关选项')
            return;
          }

          if(!/^[\da-zA-Z]{6,16}$/.test(this.newPwd)){
            this.$message.warning('请输入正确格式的密码')
            return;
          }
          if(this.newPwd != this.rptPwd){
            this.$message.warning('两次输入的密码不一致，请重新输入')
            return;
          }

            let params = {
              merchantId:this.id,
              pwd:this.newPwd
            }
            this.$axios.post('/api/front/merchant/updatePwd',qs.stringify(params))
              .then(res => {
                this.$message.success('密码修改成功，请重新登录')
                this.$router.push('/login')
              })
          }

      },
      mounted(){
        this.id = localStorage.getItem("merchantId");
      },
      computed:{
        id(){
          return this.$store.state.merchantId
        }
      },
      components:{
        back,
      }
    }
</script>

<style scoped lang="scss">
.el-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  .el-main{
    .logo{
      display: flex;
      flex-direction: row;
      justify-content: center;
      padding: 40px 0;
      img{
        width:100px;
        height: 100px;
        border-radius: 50%;
        /*overflow: hidden;*/
      }
    }
    .change{
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      .el-input{
        margin: 5px 0;
      }
    }
    .submitPwd{
      .el-button{
        margin-top: 40px;
        width: 80%;
      }
    }
  }
}
</style>
